import Taro, {
  Component
} from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
import './index.css'
import {
  AtIcon,
  AtGrid
} from 'taro-ui'

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: {}
    }
  }
  config = {
    navigationBarTitleText: '首页'
  }

  // 页面被载入
  componentWillMount() {
    this.render();
  }

  // 页面渲染完成 
  componentDidMount() {}

  // 页面展示出来 
  componentDidShow() {}

  // 页面被隐藏 
  componentDidHide() {}

  render() {
    return (
      <View className='index'>
          <View className='at-row index-header'>
            <View className='at-col at-col-1'>
              <AtIcon value='list' size='24' color='#F00'></AtIcon>
            </View>
            <View className='at-col at-col-10'>
              <View className='search-box' editable="true"></View>
            </View>
            <View className='at-col at-col-1'>
              <AtIcon value='shopping-cart' size='24' color='#F00'></AtIcon>
            </View>
          </View>
          <View className='index-swiper at-row at-row--wrap'></View>

          <View className='index-body at-row at-row--wrap'>
            <View className='at-col at-col-12'>
              <AtGrid columnNum='4' data={
                [
                  {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                    value: '领取中心'
                  },
                  {
                    image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                    value: '找折扣'
                  },
                  {
                    image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                    value: '领会员'
                  },
                  {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
                    value: '新品首发'
                  }
                ]
              } />
            </View>
          </View>
          <View className='index-img at-row at-row--wrap'>
            <View className='at-col at-col-6'></View>
            <View className='at-col at-col-6'></View>
          </View>
          <View className='index-img at-row at-row--wrap'>
            <View className='at-row'>
              <View className='at-col at-col-12'>爆款商品</View>
            </View>
            <View className='at-col at-col-6'></View>
            <View className='at-col at-col-6'></View>
          </View>
          <View className='index-img at-row at-row--wrap'>
            <View className='at-row'>
              <View className='at-col at-col-12'>新品推荐</View>
            </View>
            <View className='at-col at-col-6'></View>
            <View className='at-col at-col-6'></View>
          </View>
          <View className=''>瀑布流</View>
      </View>
    )
  }
}